@extends('layouts.base')

@section('title', '用户组')

@section('content')
    <div class="content">
        <div class="control-bar">
            <a href="{{ route('create_user_group') }}">新建</a>
        </div>
        @if($userGroups->isEmpty())
            没有数据
        @else
            <table>
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>名称</th>
                        <th>创建于</th>
                        <th>更新于</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($userGroups as $userGroup)
                    <tr>
                        <td>{{ $userGroup->id }}</td>
                        <td>{{ $userGroup->name }}</td>
                        <td>{{ $userGroup->created_at }}</td>
                        <td>{{ $userGroup->updated_at }}</td>
                        <td><span @click="destroyUserGroup('{{ route('destroy_user_group', $userGroup->id) }}')">删除</span></td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        @endif
    </div>
@endsection

@section('js')
    <script>
        new Vue({
            el: '.content',
            methods: {
                destroyUserGroup: function (url) {
                    axios.delete(url, {
                        _token: '{{ csrf_token() }}'
                    }).then(function (res) {
                        location.reload();
                    });
                },
            },
        });
    </script>
@endsection
